<template>
  <el-container class="home-container">
    <el-aside :width="isOpen ? '65px' : '200px'">
      <el-menu  background-color="  #2b2b2b" text-color="#ffb265" active-text-color="#ff0000" :unique-opened="true" :collapse="isOpen" :collapse-transition="false" :router="true" :default-active="activePath">
        <template v-for="item in navList">
          <el-submenu :key="item.id"  :dataname="item.navName" v-if="item.children.length !== 0" :index="item.id+''">
            <template slot="title">
              <i :class="item.icon" class="icon"></i>
              <span>{{item.navName}}</span>
            </template>
            <el-menu-item :disabled="$store.state.power === 1 && (subItem.id === 3001 || subItem.id === 3003) ? true : false" :dataname="subItem.navName" v-for="subItem in item.children" :key="subItem.id" :index="'/'+subItem.path" @click="saveNavPath('/'+subItem.path, $event)">
              <i :class="subItem.icon" class="icon"></i>
              <span>{{subItem.navName}}</span>
            </el-menu-item>
          </el-submenu>
          <el-menu-item :key="item.id" :dataname="item.navName" v-else :index="'/' +item.path" @click="saveNavPath('/'+item.path, $event)">
            <i :class="item.icon" class="icon"></i>
            <span>{{item.navName}}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <div class="header-container header-up">
          <img class="logo" src="../assets/logo.png" />
          <h1>基于VUE框架的单页面程序</h1>
          <span class="current-time" v-text="currentTime"></span>
        </div>
        <div class="header-container header-down">
          <div class="header-down-l">
            <div class="isopen" @click.prevent="changeAsideState" v-intro="'打开或者合并侧边导航栏'" v-intro-position="'bottom'">
              <i :class="isOpen ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
            </div>
            <el-breadcrumb separator-class="el-icon-s-flag" v-intro="'历史访问记录'" v-intro-position="'top'">
              <el-breadcrumb-item v-for="(item, i) in history" :key="i" :to="{ path: item.path }"><i class="cursor-s" @click="saveNavPath(item.path)">{{item.historyName}}</i></el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="more">
            <el-dropdown trigger="click" @command="handleClick" v-intro="'个人中兴及其附属操作'" v-intro-position="'bottom'">
              <span class="el-dropdown-link">
                <span class="moreText">更多<i class="el-icon-caret-bottom"></i></span>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="personalCenter">个人中心</el-dropdown-item>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-main>
        <transition name="router">
          <router-view :key="key"></router-view>
        </transition>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      navList: [],
      isOpen: false,
      currentTime: '00:00:00',
      history: [],
      activePath: ''
    }
  },
  created() {
    this.getNavList()
    this.activePath = sessionStorage.getItem('activePath')
    this.history = JSON.parse(sessionStorage.getItem('historys'))
  },
  computed: {
    key() {
      return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
    }
  },
  updated() {
    const eh = document.querySelector('.el-header')
    const em = document.querySelector('.el-main')
    em.style.width = eh.offsetWidth + 'px'
  },
  mounted() {
    const that = this
    window.addEventListener('resize', function() {
      if(window.innerWidth < 1024) {
        that.isOpen = true
        this.$store.commit('isOpenAside', this.isOpen)
      }else {
        that.isOpen = false
        this.$store.commit('isOpenAside', this.isOpen)
      }
    })
    setInterval(function() {
      this.getCurrentTime()
    }.bind(this), 1000)
  },
  methods: {
    async getNavList() {
      const res = await this.$http.get('/home')
      this.navList = res
    },
    async logout() {
      const flag = await this.$confirm('确定退出登陆吗？', '退出提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if(flag !== 'confirm') return this.$message.info('已取消退出登录')
      window.sessionStorage.clear()
      this.$store.state.history = []
      this.$router.push('/login')
    },
    saveNavPath(path, $event) {
      sessionStorage.setItem('activePath', path)
      this.activePath = path
      if($event !== undefined) {
        const option = {
          historyName: $event.$el.attributes.dataname.value,
          path: $event.index
        }
        const index = this.history.findIndex(i => {
          return i.historyName === option.historyName && i.path === option.path
        })
        if(index !== -1) return
        this.history.push(option)
        if(this.history.length > 8) {
          this.history.shift()
        }
        sessionStorage.setItem('historys', JSON.stringify(this.history))
      }
    },
    changeAsideState(e) {
      this.isOpen = !this.isOpen
    },
    handleClick(command) {
      if(command === 'logout') {
        return this.logout()
      }
      if(command === 'personalCenter') {
        return this.$router.push('/personalCenter')
      }
    },
    getCurrentTime() {
      const times = new Date()
      let h = times.getHours()
      h = h > 9 ? h : '0' + h
      let m = times.getMinutes()
      m = m > 9 ? m : '0' + m
      let s = times.getSeconds()
      s = s > 9 ? s : '0' + s
      this.currentTime = `${h} : ${m} : ${s}`
    }
  }
}
</script>

<style lang="less" scoped>
  .router-enter {
    opacity: 0;
  }
  .router-enter-active {
    transition: opacity .2s linear .2s;
  }
  .router-enter-to {
    opacity: 1;
  }
  .router-leave {
    opacity: 1;
  }
  .router-leave-active {
    transition: opacity .2s linear;
  }
  .router-leave-to {
    opacity: 0;
  }
  .home-container{
    height: 100%;
  }
  .el-header{
    padding: 0;
    height: 100px!important;
  }
  .el-main{
    padding: 10px 5px;
    background: linear-gradient(#aa55ff, #ffaaff);
  }
  .header-up {
    height: 60%;
    background: linear-gradient(#55aaff, #fff);
    border-bottom: 1px solid #eee;
    box-shadow: 0 1px 1px #000;
    .logo{
      margin-left: 20px;
      height: 40px;
    }
  }
  .header-down {
    height: 40%;
    background-color: #fff;
    .el-breadcrumb{
      line-height: 28px;
    }
    .more {
      margin-right: 20px;
      display: flex;
      align-items: center;
    }
  }
  .header-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .header-down-l {
    display: flex;
  }
  .el-menu {
    border-right: none;
  }
  .icon {
    margin-right: 10px;
    color: #ffa9e1;
  }
  .isopen {
    margin: 0 15px;
    padding: 2px 10px;
    border: 1px solid #e0e0e0;
    font-size: 20px;
    color: rgba(0,0,0,.7);
  }
  .current-time {
    margin-right: 20px;
    margin-top: 40px;
    color: #00aa7f;
  }
  .isopen:hover {
    background-color: #f8f8f8;
    color: #550000;
  }
  .el-dropdown-link {
    cursor: pointer;
  }
  .moreText {
    font-size: 12px;
    color: #008a00;
  }
  .el-dropdown-menu{
    width: 100px;
    padding: 0;
  }
  .cursor-s {
    cursor: pointer;
  }
</style>
